<script setup lang="ts">

// console.log(useRoute()) // 我们得到的是一个响应式id对象 (带Proxy) 可以在里面找到对应的参数
import { useRoute } from 'vue-router'
// 获取参数 我们先定义一个变量接收useRoute函数 将来使用这个变量来定义
const route = useRoute()
// 声明式 1 使用 path 和 query ,path进行传参 query接收
// console.log(route.query.id)
// console.log(route.query.key)
// 声明式 2 使用 name 和 params , name 进行传参 params 接收
console.log(route.params.id)


</script>

<template>
  <h1>PageB页面</h1>
  <p>PageB页面接收跳转的参数</p>
  <!--  演示teleport-->
  <!--  我们发现B页面内又多了一个容器-->
  <!--  to属性表示要放的目标选择器 类名也是可以的 但是推荐用id名 因为id是唯一的-->
  <teleport to="#container">
    这是放在container的内容
  </teleport>
</template>

<style scoped>

</style>
